<template>
  <layout>
    <template v-if="showPanel">
      <TransitionGroup name="list" tag="div">
        <template v-if="!showZjPanel">
          <!-- !showZjPanel -->
          <!-- 一、人员调度与跟踪 -->
          <page-main-wrap v-if="currentShowPage === 1">
            <!-- 左侧 -->
            <div class="left-box">
              <!-- 人员/车辆总览 -->
              <CarView
                ref="carViewRef"
                :carInfoList="state.carInfoCarList"
                :personTypeList="state.personTypeCountList"
              />
              <!-- 车辆列表 -->
              <!-- <CarList
                                :carInfoList="state.carInfoList"
                                :useSearch="true"
                                :placeholder="'请输入您要查询的车牌号'"
                                v-model:searchVal="state.carStr"
                                @triggerSearch="getCarList" /> -->

              <!-- <ParticipantsList
                                title="AGM人员列表"
                                type="left"
                                :entryPersonList="state.agmUserList"
                                :useSearch="true"
                                :placeholder="'请输入您要查询的姓名、证件号码、证件编号、电话号码'"
                                v-model:searchVal="state.agmStr"
                                @showUserDetailPop="showUserDetailPop"
                                @triggerSearch="getAllPersonList(3)" /> -->
            </div>

            <!-- 右侧 -->
            <div class="right-box">
              <!-- 右上 -->
              <!-- <ParticipantsList
                                :entryPersonList="state.entryPersonList"
                                title="参赛人员列表"
                                :customClass="'entry-list'"
                                :useSearch="true"
                                :placeholder="'请输入您要查询的姓名、证件号码、证件编号、电话号码'"
                                v-model:searchVal="state.entryStr"
                                @showUserDetailPop="showUserDetailPop"
                                @triggerSearch="getAllPersonList(1)" />
                            <ParticipantsList
                                :entryPersonList="state.techDataList"
                                title="技术官员列表"
                                :useSearch="true"
                                :placeholder="'请输入您要查询的姓名、证件号码、证件编号、电话号码'"
                                v-model:searchVal="state.techStr"
                                @showUserDetailPop="showUserDetailPop"
                                @triggerSearch="getAllPersonList(2)" /> -->

              <!-- 右下 工作人员列表-->
              <WokerList
                title="工作人员列表"
                :workerDataList="state.workerDataList"
                :useSearch="true"
                :placeholder="'请输入您要查询的姓名、证件号码、证件编号、电话号码'"
                v-model:searchVal="state.workStr"
                @triggerSearch="getWorkPersonList"
              />
            </div>
          </page-main-wrap>

          <!-- 二、人员信息管理 -->
          <page-main-wrap v-if="currentShowPage === 2">
            <!-- 左侧 -->
            <div class="left-box">
              <!-- 人员分类实时统计 -->
              <NowWorkerTotal
                title="人员分类核验实时统计"
                :echartsData="state.currentWorkPersonStatisticsData"
                :todayCountData="state.todayCountData"
                v-model:personType="state.personPassType"
                @tabChange="getPersonTypePassRecord"
              />
              <!-- 各点位人员核验次数 -->
              <!-- <AdmissionTotal
                                title="高新体育中心各点位人员今日人员核验次数"
                                :echartsData="state.personStatisticsData" /> -->
            </div>

            <!-- 右侧 -->
            <div class="right-box">
              <FloorZoning />

              <EveryPointPassChat
                title="各点位人员核验次数"
                :echartsData="state.everyPointPassRecordList"
                v-model:personType="state.everyType"
                @tabChange="getEveryPointPassRecord"
              />

              <FloorState />
            </div>
          </page-main-wrap>

          <!-- 三、紧急疏散管理 -->
          <page-main-wrap v-if="currentShowPage === 3">
            <!-- 左侧 -->
            <!-- 逃生区域实时信息 -->
            <div class="left-box">
              <EscapeArea :echartsData="escapeAreaStatisticsData" />
            </div>
            <div class="right-box">
              <FloorState />
            </div>
          </page-main-wrap>
        </template>
        <template v-else>
          <page-main-wrap>
            <div class="left-box">
              <PeerArea
                :title="'实时车辆通行信息'"
                :certificateCount="state.certificateCount"
              />
              <PeerArea :title="'实时人员通行信息'" type="2" />
            </div>
          </page-main-wrap>
        </template>
      </TransitionGroup>
    </template>
  </layout>
  <!-- <loginForm v-if="!isLogin" /> -->
  <!-- <UeConsole v-if="isShowConsole" /> -->
</template>
<script setup>
import { toUeMsg } from "@/utils/onClientNotify";
import {
  getAllPersonListAPI,
  getCarListAPI, //车辆数据
  getEscapeAreaStatisticsAPI, //逃生区域实时信息
  getMobilizationListAPI,
  getPersonListAPI,
  getWorkPersonListAPI, //工作人员列表
  getWorkPersonStatisticsAPI, //实时工作人员数据--
  getActualPersonListAPI, //获取实时数据 type 类型 1工作人员 2观众  必填参数
  getSpectatorPersonInfoAPI, //获取观众信息
  getPassRecordListAPI,
  getPersonTypeCountAPI,
  getPersonTypePassRecordAPI,
  getPersonPointPassRecordAPI,
  getEveryPointPassRecordAPI,
  getCarTypeCountAPI,
  getCertificateCountAPI,
  getTodayCountAPI,
} from "@/api/index";

import useStore from "@/store";
import loginForm from "./components/loginForm/index.vue";
import { onMounted, watch } from "vue";
import { renderUserDetailPop } from "@/pops";

const { app } = useStore();
const { showPanel, showZjPanel, isLogin, isShowConsole } = storeToRefs(app);

const FloorState = defineAsyncComponent(() =>
  import("./components/floorState/index.vue")
);
const CarView = defineAsyncComponent(() =>
  import("./components/carView/index.vue")
);
const CarList = defineAsyncComponent(() =>
  import("./components/carList/index.vue")
);
const ParticipantsList = defineAsyncComponent(() =>
  import("./components/participantsList/index.vue")
);
const WokerList = defineAsyncComponent(() =>
  import("./components/wokerList/index.vue")
);
const AdmissionTotal = defineAsyncComponent(() =>
  import("./components/admissionTotal/index.vue")
);
const EveryPointPassChat = defineAsyncComponent(() =>
  import("./components/everyPointPassChat/index.vue")
);

const NowWorkerTotal = defineAsyncComponent(() =>
  import("./components/nowWorkerTotal/index.vue")
);

const FloorZoning = defineAsyncComponent(() =>
  import("./components/floorZoning/index.vue")
);

const EscapeArea = defineAsyncComponent(() =>
  import("./components/escapeArea/index.vue")
);

// 通行数据
const PeerArea = defineAsyncComponent(() =>
  import("./components/peerData/index.vue")
);

const isMock = true;
const getRandomNum = (baseNum = 1000) => Math.ceil(Math.random() * baseNum);
//ref
const carViewRef = ref(null);

// data
const state = reactive({
  todayCountData: {},
  //获取制证数据总数
  certificateCount: {},

  // 人员制证数据
  personTypeCountList: [],
  //车辆制证数据
  carInfoCarList: [],

  allNum: 0,
  // 当前人员到场统计数量
  currentPersonCountData: [],

  // 车辆列表
  carInfoList: [],
  carStr: "",

  // 参赛人员列表
  entryPersonList: [],
  entryStr: "",
  // 技术人员列表
  techDataList: [],
  techStr: "",

  // AGM人员
  agmUserList: [],
  agmStr: "",

  // 工作人员列表
  workerDataList: [],
  workStr: "",

  // 实时工作人员统计 玫瑰图
  currentWorkPersonStatisticsData: [],
  personPassType: "1",
  // 15、各点位人员核验次数
  personStatisticsData: [],
  // 16、各点位人员核验次数
  everyPointPassRecordList: [],
  everyType: "1",

  // 逃生区域实时信息
  escapeAreaStatisticsData: [],

  // 实时工作数据
  currentWorkPersonList: [],
  // 实时观众数据
  currentSpectatorPersonList: [],

  // 当前显示的哪个界面 1 人员调度与跟踪  2 人员信息管理  3 紧急疏散管理
  currentShowPage: 1,
  currentFloorState: false, // 切换展示楼层 打开状态  0 关闭 1 打开
  currentFloor: 1, //当前楼层号
  currentRoom: null, //当前房间号
});

// 修改当前楼层
const handleChangeFloor = (i) => {
  state.currentFloor = i;
  toUeMsg("changeCurrentFloor", i);
};

// 修改当前楼层展开状态
const handleChangeFloorState = (bool) => {
  state.currentFloorState = bool;
  toUeMsg("changeFloorState", ~~bool);
};

const {
  escapeAreaStatisticsData, // 逃生区域实时信息
  // 实时工作数据
  currentWorkPersonList,
  // 实时观众数据
  currentSpectatorPersonList,

  currentShowPage, //当前显示页面
  currentFloor,
  currentFloorState,
} = toRefs(state);

//methods
// 修改显示界面
const changeShowPage = (pageNum) => {
  app.setShowPanel(true);
  currentShowPage.value = pageNum;
  toUeMsg("changeShowPage", pageNum);
};

// 修改当前显示房间
const changeCurrentRoom = (roomNum, floorNumber) => {
  state.currentRoom = roomNum;
  toUeMsg("changeCurrentRoom", roomNum);
};

// 向后代组件抛出的方法
provide("currentShowPage", currentShowPage);
provide("changeShowPage", changeShowPage);

const showUserDetailPop = (item) => {
  console.log("item", item);
  renderUserDetailPop({
    props: {
      item: item,
    },
  });
};

// 当前人员到场统计数量
const getMobilizationList = async (type = 1) => {
  const params = {
    type,
  };
  const res = await getMobilizationListAPI(params);
  if (res.isResultTrue) {
    const resData = res.data;
    state.allNum = resData.total;
    state.currentPersonCountData = [
      {
        value: resData.inTotal,
        name: "已进场",
        itemStyle: {
          color: "#E28AEE",
        },
      },
      {
        value: resData.total - resData.inTotal,
        name: "未进场",
        itemStyle: {
          color: "#9996E8",
        },
      },
    ];
  }
  // console.log("获取所有人员信息 "+ type +" => \n" , res);
};

// 获取 所有车辆数据
const getCarList = async () => {
  const params = {
    pageSize: 1000,
    pageNum: 1,
    carPlate: state.carStr, //车牌号
  };
  const res = await getCarListAPI(params);
  // console.log('获取 所有车辆数据 信息 => \n', res)
  if (res.isResultTrue) {
    const list = res.data.records || [];
    state.carInfoList = list;
    // console.log('list car', list.map(item => item.type).join(','))
  }
};

// // 获取 实时入场人数 入场人数实时统计 （每个时间点各类型人员的到场人数
// const getPersonStatisticList = async () => {
//   const res = await getPersonListAPI();
//   // console.log('获取 实时入场人数 信息 => \n', res)
//   if (res.isResultTrue) {
//     state.personStatisticsData = res.data || [];
//   }
// };

// 获取 参赛人员列表、技术官人员列表、AGM人员
const getAllPersonList = async (type = 1) => {
  const params = {
    pageSize: 10,
    pageNum: 1,
    type,
  };
  if (type === 1) {
    params.name = state.entryStr;
    //1参赛人员 2技术官员
  } else if (type === 2) {
    params.name = state.techStr;
  } else {
    params.name = state.agmStr;
  }

  const res = await getAllPersonListAPI(params);
  // console.log('获取 参赛人员列表、技术官人员列表'+type+' 信息 => \n', res)
  if (res.isResultTrue) {
    if (type === 1) {
      //1参赛人员 2技术官员
      state.entryPersonList = res.data.records || [];
    } else if (type === 2) {
      state.techDataList = res.data.records || [];
    } else {
      state.agmUserList = res.data.records || [];
    }
  }
};
// 获取 工作人员列表
const getWorkPersonList = async () => {
  const params = {
    pageSize: 30,
    pageNum: 1,
    name: state.workStr,
  };
  const res = await getWorkPersonListAPI(params);
  console.log("获取 工作人员列表 信息 => \n", res);
  if (res.isResultTrue) {
    state.workerDataList = res.data.records || [];
  }
};
// // 获取 实时工作人员统计 数据
// const getWorkPersonStatistics = async () => {
//   const res = await getWorkPersonStatisticsAPI();
//   // console.log("获取 实时工作人员统计 信息 => \n", res);
//   if (res.isResultTrue) {
//     state.currentWorkPersonStatisticsData = res.data;
//   }
// };

// 获取 人员分类实时统计 数据
const getPersonTypePassRecord = async () => {
  getTodayCount();
  const res = await getPersonTypePassRecordAPI({ type: state.personPassType });
  state.personTypeCountList = res.data;
  // console.log("获取 人员分类实时统计 信息 => \n", res);
  if (res.isResultTrue) {
    // if (isMock) {
    //   const mockList = [
    //     {
    //       name: "后台证",
    //       color: "#578D31",
    //     },

    //     {
    //       name: "工作人员证",
    //       color: "#833F0A",
    //     },
    //     {
    //       name: "公安执勤证",
    //       color: "#C00000",
    //     },
    //     {
    //       name: "特殊卡",
    //       color: "#FFC000",
    //     },
    //     {
    //       name: "演职人员证",
    //       color: "#9550CB",
    //     },
    //     {
    //       name: "外场证",
    //       color: "#000000",
    //     },
    //     {
    //       name: "安保指挥证",
    //       color: "#EF949E",
    //     },
    //     {
    //       name: "消防执勤证",
    //       color: "#4BAF57",
    //     },
    //     {
    //       name: "嘉宾证",
    //       color: "#FEF2CA",
    //     },
    //     {
    //       name: "医疗证",
    //       color: "#4471C4",
    //     },
    //     {
    //       name: "公安指挥证",
    //       color: "#30C0B4",
    //     },
    //     {
    //       name: "全通证",
    //       color: "#fff",
    //     },
    //     {
    //       name: "赞助商证",
    //       color: "#7F7F7F",
    //     },
    //     {
    //       name: "公安总指挥证",
    //       color: "#E54C5E",
    //     },
    //     {
    //       name: "选手证",
    //       color: "#E23C5E",
    //     },
    //     {
    //       name: "测试证",
    //       color: "#F21C5E",
    //     },
    //     {
    //       name: "媒体证",
    //       color: "#E11C1E",
    //     },
    //     {
    //       name: "经纪人证",
    //       color: "#E32B1E",
    //     },
    //     {
    //       name: "公安副总指挥证",
    //       color: "#F12D1F",
    //     },
    //     {
    //       name: "文化全通证",
    //       color: "#BB5B1E",
    //     },
    //     {
    //       name: "消防指挥证",
    //       color: "#B65B1E",
    //     },
    //   ];
    //   res.data = mockList.map((item) => {
    //     item.count = getRandomNum();
    //     return item;
    //   });
    // }
    state.currentWorkPersonStatisticsData = res.data.sort(
      (a, b) => b.count - a.count
    );
  }
};
// 获取 、各点位人员核验次数
const getPersonPointPassRecord = async () => {
  const res = await getPersonPointPassRecordAPI();
  // console.log('获取 、各点位人员核验次数 信息 => \n', res)
  if (res.isResultTrue) {
    if (isMock) {
      res.data.forEach((item, i) => {
        item.counts = item.counts.map((c) => getRandomNum(100 * (i + 1)) + 50);
      });
    }
    state.personStatisticsData = res.data || [];
  }
};
// 获取 16、各点位人员核验次数
const getEveryPointPassRecord = async () => {
  const res = await getEveryPointPassRecordAPI({ type: state.everyType });
  console.log("获取 16、各点位人员核验次数 信息 => \n", res);
  if (res.isResultTrue) {
    if (isMock) {
      res.data.forEach((item, i) => {
        item.count = getRandomNum(100 * (i + 1)) + 50;
      });
    }
    state.everyPointPassRecordList = res.data || [];
  }
};

// 获取 逃生区域实时信息
const getEscapeAreaStatistics = async () => {
  const res = await getEscapeAreaStatisticsAPI();
  // console.log("获取 逃生区域实时信息 信息 => \n", res);
  if (res.isResultTrue) {
    state.escapeAreaStatisticsData = res.data || [];
    const areaNumData = {};
    res.data.record.map((item) => {
      let key = item.name.replace("区", "");
      areaNumData[key] = item.count;
    });

    // console.log('areaNumData', areaNumData)
    toUeMsg("HumenHotMapList", areaNumData);
  }
};

// 获取实时观众、工作人员数据
const getActualPersonList = async (type = 1) => {
  const params = {
    type,
  };
  const res = await getActualPersonListAPI(params);
  // console.log("获取实时观众、工作人员" + type + "数据", res);
  if (res.isResultTrue) {
    const list = res.data.map((item) => {
      item.type = type;
      return item;
    });

    if (type === 1) {
      //实时工作数据
      state.currentWorkPersonList = list;
    } else {
      //实时观众数据
      // console.log("获取实时观众、工作人员" + type + "数据", res);
      state.currentSpectatorPersonList = list;
      // toUeMsg("updateUserList", list);
      app.setAreaListData(
        list.map((item) => ({ ...item, area: item.position }))
      );
    }
  }
};

const getPassRecordList = async () => {
  const res = await getPassRecordListAPI();
  if (res.isResultTrue) {
    app.pushPassData(res.data);
  }
  console.log("进场数据", res);
};

// 获取制证数据总数
const getCertificateCount = async () => {
  const res = await getCertificateCountAPI();
  // console.log('获取制证数据总数', res)
  if (res.isResultTrue) {
    state.certificateCount = res.data;
  }
};

// 获取人员制证数据
const getPersonTypeCount = async () => {
  const res = await getPersonTypeCountAPI();
  // console.log('获取人员制证数据', res)
  if (res.isResultTrue) {
    // state.personTypeCountList = res.data;
  }
};

// 获取 所有车证分类数据
const getCarTypeCount = async () => {
  const res = await getCarTypeCountAPI();
  // console.log('获取 所有车证数据 信息 => \n', res)
  if (res.isResultTrue) {
    state.carInfoCarList = res.data;
  }
};
const getTodayCount = async () => {
  const res = await getTodayCountAPI({ type: state.personPassType });
  // console.log('获取 getTodayCount => \n', res)
  if (res.isResultTrue) {
    if (isMock) {
      res.data.personCount = getRandomNum(10000);
      res.data.personTime = getRandomNum(20000);
    }
    state.todayCountData = res.data;
  }
};

// 点击取消
const cancel = () => {
  console.log("点击了取消");
};

const initData = () => {
  // getMobilizationList(1); // 获取 当前人员到场统计数量
  // getTodayCount();

  // getPersonTypeCount(); // 获取 人员制证数据
  // getCarTypeCount(); // 获取 车辆制证数据
  getCertificateCount(); //获取制证数据总数

  // getCarList(); // 获取 所有车辆数据
  // getAllPersonList(1); // 获取 参赛人员列表
  // getAllPersonList(2); // 获取 技术官人员列表
  // getAllPersonList(3); // 获取 AGM列表
  getWorkPersonList(); // 获取 工作人员列表

  getPersonTypePassRecord(); // 获取 人员分类实时统计 数据
  getPersonPointPassRecord(); //获取 各点位人员核验次数
  getEveryPointPassRecord(); //获取 各点位人员核验次数
  // getEscapeAreaStatistics(); // 获取 逃生区域实时信息
  // getActualPersonList(1); // 获取 实时数据 工作人员列表
  // getActualPersonList(2); // 获取 实时数据 观众人员列表
  getPassRecordList();

  //
  // getSpectatorPersonInfoAPI({seatNum: '2A-8-2'}).then(res => console.log('观众信息', res))
};

let timer = null;
const loopData = () => {
  if (timer) clearTimeout(timer);
  console.log("loop get data");
  isLogin.value && initData();
  timer = setTimeout(() => {
    loopData();
  }, 90 * 1000);
};

watch(
  () => isLogin.value,
  () => {
    if (isLogin.value) {
      loopData();
    }
  },
  {
    immediate: true,
  }
);

onBeforeUnmount(() => {
  if (timer) clearTimeout(timer);
});

onMounted(() => {
  initData();
});
</script>
<style scoped lang="scss">
.left-box {
  margin-left: 12px;
  width: 472px;

  .left-box-top {
    height: 540px;
    background-color: #c83434;
  }

  .left-box-bottom {
    margin-top: 20px;
    height: 244px;

    background-color: #fff;
  }
}

.center-box {
  flex: 1;
}
.right-box {
  margin-right: 24px;
  width: 472px;
  position: relative;
  // .right-box-top {
  //   display: flex;
  //   flex-direction: column;
  //   flex: 1;
  //   height: 472px;
  //   // background-color: #9f6666;
  //   position: relative;
  //   .floorZoning {
  //     margin: 25px 0 0 21px;
  //     font-size: 14px;
  //     .floor-search {
  //       position: relative;
  //       width: 260px;
  //       height: 32px;
  //       border-radius: 16px;
  //       box-shadow: inset 0px 0px 12px 0px #e28aee;
  //       line-height: 32px;
  //       .floor-search-input {
  //         display: inline-block;
  //         width: 100%;
  //         position: absolute;
  //         left: 0;
  //         top: 0;
  //         bottom: 0;
  //         right: 0;
  //         border-radius: inherit;
  //         padding-left: inherit;
  //         line-height: inherit;
  //         background-color: transparent;
  //         border: none;
  //         padding: 2px 38px 2px 14px;
  //         box-sizing: border-box;
  //         color: #ffffff;
  //         font-size: 14px;
  //         &:focus {
  //           outline: none;
  //         }
  //       }
  //       .floor-cancel,
  //       .floor-img {
  //         position: absolute;
  //         right: 14px;
  //         top: 50%;
  //         transform: translate(0, -50%) scale(1);

  //         width: 14px;
  //         height: 14px;
  //       }
  //       .floor-cancel {
  //         cursor: pointer;
  //         &:active {
  //           transition: all 0.1s ease;
  //           transform: translate(0, -50%) scale(1.05);
  //         }
  //       }
  //     }
  //     .floor-info {
  //       padding-left: 55px;
  //       color: rgba(255, 255, 255, 0.6);
  //       .info {
  //         margin-top: 20px;
  //       }
  //       .floor-info-active {
  //         position: relative;
  //         color: #ffffff;

  //         &::before {
  //           content: "";
  //           display: block;
  //           width: 5px;
  //           height: 5px;
  //           border-radius: 50%;
  //           background-color: #ffffff;
  //           position: absolute;
  //           top: 50%;
  //           left: -14px;
  //           transform: translate(0, -50%);
  //         }
  //       }
  //     }
  //     .margTop {
  //       margin-top: 34px;
  //       color: rgba(255, 255, 255, 0.6);
  //       .floor-img {
  //         width: 16px;
  //         height: 16px;
  //         margin-left: 116px;
  //         margin-bottom: -2px;
  //       }
  //     }
  //   }
  //   &::before {
  //     content: "";
  //     width: 7px;
  //     height: 7px;
  //     border-radius: 50%;
  //     background-color: #fff;
  //     position: absolute;
  //     top: 8px;
  //     left: 30px;
  //   }
  // }
}
</style>
